<template>
  <template v-if="preview">
    <div v-if="modelValue">
      <el-image
        v-if="typeof modelValue == 'string'"
        class="image-show"
        :src="modelValue"
        fit="cover"
      ></el-image>
      <div v-else style="display:flex;flex-warp:warp">
        <div v-for="(url, index) in modelValue" :key="index" class="more-image-show">
          <el-icon @click="removeImage(url)" size="18" class="image-show-icon"><CircleClose /></el-icon>
          <el-image
          class="image-show"
          :src="url"
          fit="cover"
          :initial-index="index"
          :preview-src-list="modelValue">
          </el-image>
        </div>
      </div>
    </div>
    <div class="image-select" @click="open()">
      <el-icon class="image-icon" :size="24"><Plus /></el-icon>
    </div>
  </template>

  <el-dialog v-model="dialogVisible" title="图片选择" width="80%" top="5vh">
    <el-container>
      <el-header v-permission="['createImageClass,POST', 'uploadImage,POST']">
        <el-button
          type="primary"
          size="small"
          @click="handleOpenCreate"
          v-permission="['createImageClass,POST']"
          >新增图片分类</el-button
        >
        <el-button
          type="warning"
          size="small"
          @click="handleOpenUpload"
          v-permission="['uploadImage,POST']"
          >上传图片</el-button
        >
      </el-header>
      <el-container>
        <el-aside width="220px">
          <image-aside
            ref="imageAsideRef"
            @change="handleAsideChange"
          ></image-aside>
        </el-aside>
        <el-main>
          <image-main
            open-choose
            ref="imageMainRef"
            :limit="limit"
            @choose="handleChoose"
          ></image-main>
        </el-main>
      </el-container>
    </el-container>
    <template #footer>
      <span>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { toast } from "~/composables/util";
import ImageAside from "~/components/ImageAside.vue";
import ImageMain from "~/components/ImageMain.vue";

const props = defineProps({
  modelValue: [String, Array],
  limit: {
    type: Number,
    default: 1,
  },
  preview: {
    type:Boolean,
    default:true
  }
});

const dialogVisible = ref(false);
const callbackFunction = ref(false)

// 打开照片弹框
const open = (callback = false) => {
  callbackFunction.value = callback
  dialogVisible.value = true;
};

// 关闭照片弹框
const close = () => {
  dialogVisible.value = false;
  callbackFunction.value = false
};

// 确认头像
let urls = [];
const handleChoose = (e) => (urls = e.map((o) => o.url));
const emit = defineEmits(["update:modelValue"]);
const submit = () => {
  if (urls.length < 1) {
    return toast("至少需要选择 1 张", "error");
  }
  const value = props.limit == 1 ? urls[0] : [...urls];
  emit("update:modelValue", value);

  if(!props.preview && typeof callbackFunction.value == "function"){
            callbackFunction.value(value)
  }

  close();
};

const imageMainRef = ref(null);
const imageAsideRef = ref(null);

// 新增图片分类
const handleOpenCreate = () => imageAsideRef.value.openCreate();
// 上传图片
const handleOpenUpload = () => {
  imageMainRef.value.openUpload();
};
// 选中图库
const handleAsideChange = (image_class_id) => {
  imageMainRef.value.loadData(image_class_id);
};
const removeImage = (url) => emit("update:modelValue", props.modelValue.filter(u => u != url))

defineExpose({ open })
</script>
<style lang="scss" scoped>
@mixin center() {
  display: flex;
  align-items: center;
}
.image-show {
  width: 100px;
  height: 100px;
  border: 1px solid #e5e7eb;
  @include center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 4px;
}
.more-image-show {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  .image-show-icon {
    position: absolute;
    cursor: pointer;
    border-radius: 50%;
    background: white;
    right: 5px;
    top: 5px;
    z-index: 10;
  }
}
.image-select {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  @include center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  transition: all 0.3s;
  .image-icon {
    color: #9ca3af;
  }
}
.image-select:hover {
  background: #f3f4f6;
}
</style>